import React, { useState, useEffect, useRef } from 'react';
import { NavBar, AutoCenter, Toast, Button, Form, Input } from 'antd-mobile';
import { useHistory, useLocation } from 'umi';
import request from 'umi-request';

export default function Login() {
  const history = useHistory();
  const location = useLocation();
  const [account, setaccount] = useState('');
  const [password, setpassword] = useState('');

  const back = () => {
    history.goBack();
  };

  const onFinish = () => {
    if (!localStorage.getItem('hunliji_token')) {
      localStorage.setItem('hunliji_token', account);
    }
    if (localStorage.getItem('hunliji_token')) {
      Toast.show({
        icon: 'success',
        content: '登录成功',
      });

      history.goBack();
      // history.push('/home');
    } else {
      Toast.show({
        icon: 'feil',
        content: '登陆失败，请重新登录',
      });
    }
  };

  return (
    <>
      <NavBar onBack={back}>登录</NavBar>
      <Form
        layout="horizontal"
        className="autoform"
        onFinish={onFinish}
        footer={
          <Button block type="submit" color="success" size="large">
            登录
          </Button>
        }
      >
        <Form.Item
          // label="账号"
          name="account"
          rules={[{ required: true, message: '账号不能为空' }]}
        >
          <Input
            placeholder="请输入账号"
            className="account"
            value={account}
            onChange={(val) => {
              setaccount(val);
            }}
            clearable
          />
        </Form.Item>
        <Form.Item
          // label="密码"
          name="password"
          rules={[
            { required: true, message: '密码不能为空' },
            {
              type: 'string',
              min: 5,
              max: 8,
              message: '长度为5到8位，只能出现数字、字母、下划线',
            },
          ]}
        >
          <Input
            placeholder="请输入密码"
            className="password"
            value={password}
            onChange={(val) => {
              setpassword(val);
            }}
            clearable
          />
        </Form.Item>
      </Form>

      <AutoCenter>
        <p>还没有账号，去注册~</p>
      </AutoCenter>
    </>
  );
}
